<template>
	<view class="all">
		<view class="carp" @click="submit(item)" v-for="(item,index) in info.data">
			<image v-if="item.check" class="carp_1" src="@/static/img/dui.png" />
			<image v-if="!item.check&&!bj" class="carp_1" src="@/static/img/wxzh.png" />
			<view class="w2">
				<view class="w2_11" :style="{
					 'background-image':$img(item.logo_image) 
				}">
				</view>
				<view class="w2_1">
					<text class="w2_1t">{{item.name}}</text>
					<view class="w2_2">
						<text>{{item.purchase_number}}人已观看</text>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: ['info', 'bj'],
		data() {
			return {}
		},
		methods: {
			sing(a) {
				this.info.data.forEach(v => {
					v.check = a
					// if (this.quan) {
					// 	v.check = true
					// } else {
					// 	v.check = false
					// }
				})
			},
			submit(a) {
				if (a.check) {
					a.check = false
				} else {
					a.check = true
				}
			}
		},
		watch: {
			'info.data': {
				immediate: true,
				deep: true,
				handler(newName, oldName) {
					let a = newName.filter(v => {
						return v.check
					})
					let b = null
					if (a.length == this.info.data.length) {
						b = true
					} else {
						b = false
					}
					this.$emit('onnew', a, b)
				},
			},
			// quan(a) {
			// 	this.info.data.forEach(v => {
			// 		if (a) {
			// 			v.check = true
			// 		} else {
			// 			v.check = false
			// 		}
			// 	})
			// },

		},
		// computed: {
		// 	listxz() {
		// 		let data = []
		// 		this.info.data.forEach(v => {
		// 			if (v.check) {
		// 				data.push(v)
		// 			}
		// 		})
		// 		console.log(a)
		// 		return data
		// 	}
		// },
	}
</script>

<style lang="scss" scoped>
	.w2 {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #EFEFEF;
		width: 90%;
		display: flex;

		.w2_11 {
			width: 240rpx;
			height: 156rpx;
			border-radius: 8rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.w2_1 {
			position: relative;
			width: 60%;
			margin-left: 20rpx;

			.w2_2 {
				width: 100%;
				align-items: center;
				display: flex;
				position: absolute;
				bottom: 0;
				justify-content: space-between;

				text:nth-of-type(1) {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #141414;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: HarmonyOS Sans;
					font-weight: bold;
					color: #E61E2A;
					opacity: 1;
				}


			}

			.w2_1t {
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				width: 100%;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				opacity: 1;
			}

			// text:nth-of-type(1) {
			// 	display: block;
			// 	font-size: 32rpx;
			// 	font-family: Source Han Sans CN;
			// 	font-weight: bold;
			// 	color: #333333;
			// 	opacity: 1;
			// }
		}

	}

	.carp {
		display: flex;
		justify-content: space-between;
		align-items: center;

		padding-top: 30rpx;

		.carp_2 {
			width: 50%;
			height: 156rpx;

			text:nth-of-type(2) {
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 45px;
				color: #141414;
				opacity: 1;
			}

			text:nth-of-type(1) {
				display: block;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				opacity: 1;
			}
		}

		.carp_1 {
			width: 40rpx;
			height: 40rpx;
		}

		.carp_02 {
			width: 240rpx;
			height: 156rpx;
			border-radius: 8rpx;
		}
	}
</style>
